<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <!--<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>-->
    <script type="text/javascript" th:src="@{/asserts/scripts/vue2.7.14.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style rel="stylesheet" th:href="@{/asserts/styles/global.css}"></style>

    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        .login_container {
            background-color: #2b4b6b;
            height: 100%;
        }
        .login_box {
            width: 450px;
            height: 300px;
            background-color: #fff;
            border: 1px solid #cccccc;
            border-radius: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .login_box .avatar_box {
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 1px solid #eee;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -30%);
            background-color: #fff;

        }
        .login_box .avatar_box img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
        .btns {
            display: flex;
            justify-content: center;
        }
        .login_form {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;
        }
    </style>

</head>
<body>
    <div id="app">
        <div class="login_container">
            <div class="login_box">
                <div class="avatar_box">
                    <img th:src="@{/asserts/imgs/caishen.jpg}" />
                </div>

                <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginFormRules"
                        label-width="0px"
                        class="login_form"
                >
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" placeholder="用户名" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                prefix-icon="el-icon-lock"
                                placeholder="密码"
                                v-model="loginForm.password"
                                type="password"
                        ></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button type="primary" @click.prevent="login">登录</el-button>
                        <el-button type="info" @click="resetLogin">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <script>
        let vupApp = new Vue({
            el:"#app",
            data:{
                loginForm: {
                    username: "",
                    password: ""
                },
                loginFormRules: {
                    username: [
                        { required: true, message: "用户名必填", trigger: "blur" },
                        { min: 4, max: 8, message: "用户名在4到8个字符之间", trigger: "blur" }
                    ],
                    password: [
                        { required: true, message: "密码必填", trigger: "blur" },
                        {
                            min: 3,
                            max: 8,
                            message: "用户密码在3到8个字符之间",
                            trigger: "blur"
                        }
                    ]
                }
            },
            methods: {
                resetLogin() {
                    this.$refs["loginForm"].resetFields();
                },

                login() {
                    //验证
                    this.$refs["loginForm"].validate((valid)=>{
                        if(!valid) {
                            return ;
                        }else {
                            let url = "./manager/login" ;
                            //let params = this.loginForm ;
                            axios.post(url, {
                                "username":this.loginForm.username,
                                "password":this.loginForm.password
                            }).then((res)=>{
                                console.log(res)
                                if (res.data.code == 200) {
                                    this.$message({   //alert("登录成功");
                                        type:'success', //提示类型  success 成功 绿色信息
                                        message:res.data.message , //提示信息
                                        duration:1000  // 1秒之后 自动关闭
                                    })
                                    //访问主页
                                    location.href = "./home.html"
                                }else {
                                    this.$message({   //alert("登录成功");
                                        type:'error', //提示类型  error 失败  红色信息
                                        message:res.data.message , //提示信息
                                        duration:1000  // 1秒之后 自动关闭
                                    })
                                }
                            });
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>